<template>
  <view class="box">
    <view class="header">
      <view class="Top">
        <view class="Top-top">
          <view class="Top-top-left">
            <uni-data-select v-model="value" :localdata="range" @change="change" :clear="false"></uni-data-select>
          </view>
          <view class="Top-top-right">
            <uni-easyinput class="uni-mt-5" suffixIcon="search" v-model="inpValue" :placeholder="inpPlaceholder"
              @iconClick="iconClick"></uni-easyinput>
          </view>
          <view class="Top-top-text">
            <text @click="OpenDitu">地图找房</text>
          </view>
        </view>
        <view class="Top-con">
          <view class="Top-con-item" v-for="(item, index) in fangTab" :key="index" @click="TabFang(index)">
            <image :src="item.img" mode="" />
            <text :class="index === TabIndex ? 'on' : ''" style="font-size: 30rpx;">{{ item.text }}</text>
          </view>
        </view>
      </view>
      <Tab @TabPaixu="TabPaixu"></Tab>
    </view>
    <view class="con" v-if="dataList.newdatalist.length">
      <view class="con-item" v-for="(item, index) in dataList.newdatalist" :key="index" @click="ToDetail(item.id)">
        <view class="con-item-left">
          <image :src="item.img" class="img" />
        </view>
        <view class="con-item-right">
          <view class="title">{{ item.name }}</view>
          <view class="pingmi">{{ item.ll }}平/{{ item.house_type }}/{{ item.resident }}</view>
          <view class="jiage"><text class="price">{{ item.price }}万</text><text class="mi">{{ item.extent }}万元/㎡</text>
          </view>
          <view class="type">{{ item.renovation }}</view>
        </view>
      </view>
    </view>
    <view v-else class="null">
      <image src="http://10.31.71.52:7002/public/static/Xinfang/暂无数据.png" />
      <text>房源信息正在补充中</text>
    </view>
    <view class="fex">
      <view class="fex-left" @click="ToHome">
        <image src="http://10.31.71.52:7002/public/static/Xinfang/3.1首页-选中.png" />
        首页
      </view>
      <view class="fex-right" @click="fexPaixu">
        <view v-if="ClickNum === 0">
          <image src="http://10.31.71.52:7002/public/static/Xinfang/排序排行.png" />
          <text>排序</text>
        </view>
        <view v-if="ClickNum === 1">
          <image src="http://10.31.71.52:7002/public/static/Xinfang/排序上.png" />
          <text>升序</text>
        </view>
        <view v-if="ClickNum === 2">
          <image src="http://10.31.71.52:7002/public/static/Xinfang/排序下.png" />
          <text>降序</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onShow } from '@dcloudio/uni-app';
import { ref, reactive } from 'vue';
// 页面渲染数据
const dataList = reactive({
  newdatalist: []
});
// 页面渲染数据
const clonedatalist = reactive({
  newdatalist: []
});
// 进入页面onShow事件
onShow(() => {
  uni.request({
    url: "http://10.31.71.52:7002/second/housing",
    method: 'GET',
    success: function (res) {
      if (res.data.code === 1) {
        dataList.newdatalist = res.data.data
        clonedatalist.newdatalist = res.data.data;
      }
    }
  })
});


// 下拉菜单默认显示下标
const value = ref(0);
// 下拉菜单数据
const range = reactive([
  { value: 0, text: "全部" },
  { value: 1, text: "北京" },
  { value: 2, text: "上海" },
  { value: 3, text: "天津" },
  { value: 4, text: "重庆" },
]);
// 下拉框触发的change事件
const change = (e) => {
  const item = range.find(t => t.value === e);
  if (item.text === '全部') {
    dataList.newdatalist = clonedatalist.newdatalist;
  } else {
    dataList.newdatalist = clonedatalist.newdatalist.filter(t => t.area.includes(item.text));
  }
};


// input输入框双向绑定数据
const inpValue = ref('');
// input输入框占位符
const inpPlaceholder = ref('请在这里输入区域/商圈');
// input的图标点击事件
const iconClick = (type) => {
  if (inpValue.value === '') {
    uni.request({
      url: "http://10.31.71.52:7002/second/housing",
      method: 'GET',
      success: function (res) {
        console.log(res.data);
        if (res.data.code === 1) {
          dataList.newdatalist = res.data.data
          clonedatalist.newdatalist = res.data.data;
        }
      }
    })
  } else {
    const items = dataList.newdatalist.filter(t => t.name.includes(inpValue.value) || t.resident.includes(inpValue.value));
    if (items) {
      dataList.newdatalist = items;
      inpValue.value = '';
    }
  }
};

// 头部tab切换的高亮下标
const TabIndex = ref(false);
// tab切换数据
const fangTab = reactive([
  {
    img: 'http://10.31.71.52:7002/public/static/map/蓝色建筑.png',
    text: '找商铺'
  },
  {
    img: 'http://10.31.71.52:7002/public/static/map/三层别墅.png',
    text: '找写字楼'
  },
  {
    img: 'http://10.31.71.52:7002/public/static/map/橙色建筑.png',
    text: '找小区'
  }
]);
// 头部tab点击事件
const TabFang = (index) => {
  TabIndex.value = index;
  const textitem = range.find(t => t.value === value.value);
  if (textitem.text === '全部') {
    uni.request({
      url: "http://10.31.71.52:7002/second/housing",
      method: 'GET',
      data: {
        status: index
      },
      success: function (res) {
        if (res.data.code === 1) {
          dataList.newdatalist = res.data.data;
          clonedatalist.newdatalist = res.data.data;
        }
      }
    })
  } else {
    uni.request({
      url: "http://10.31.71.52:7002/second/housing",
      method: 'GET',
      data: {
        status: index
      },
      success: function (res) {
        if (res.data.code === 1) {
          clonedatalist.newdatalist = res.data.data;
          const items = [];
          res.data.data.forEach(item => {
            if (item.area.includes(textitem.text)) {
              items.push(item);
            }
          });
          dataList.newdatalist = items;
        }
      }
    })
  }
};

// 打开地图事件
const OpenDitu = () => {
  uni.getLocation({
    geocode: true,
    type: 'wgs84',
    success: (res) => {
      console.log(res, '获取当前位置')
      uni.chooseLocation({
        longitude: res.longitude,
        latitude: res.latitude
      })
    },
    address: (res) => {
      console.log('address', res)
    }
  })
}

// 计数器
const ClickNum = ref(0);
// 右下角排序点击事件
const fexPaixu = () => {
  ClickNum.value++;
  if (ClickNum.value === 1) {
    dataList.newdatalist = clonedatalist.newdatalist.sort((a, b) => a.price - b.price)
  }
  if (ClickNum.value === 2) {
    dataList.newdatalist = clonedatalist.newdatalist.sort((a, b) => b.price - a.price)
  }
  if (ClickNum.value === 3) {
    dataList.newdatalist = clonedatalist.newdatalist.sort((a, b) => a.price - b.price)
    ClickNum.value = 0;
  }
}
const ClickBol = ref(false);
const TabPaixu = () => {
  ClickBol.value = !ClickBol.value
  if (ClickBol.value) {
    dataList.newdatalist = clonedatalist.newdatalist.sort((a, b) => b.price - a.price)
  }
  if (!ClickBol.value) {
    dataList.newdatalist = clonedatalist.newdatalist.sort((a, b) => a.price - b.price)
  }
}

//跳转到首页 
const ToHome = () => {
  uni.switchTab({
    url: '/pages/home/home'
  });

}
// 跳转到详情页
const ToDetail = (id) => {
  uni.navigateTo({
    url: '/subpkg/detail/detail?id=' + id,
  })
}
</script>

<style scoped lang="scss">
.box {
  width: 100vw;
  height: auto;
  overflow: scroll;

  .fex {
    width: 160rpx;
    height: 160rpx;
    position: fixed;
    right: 30rpx;
    top: 900rpx;
    z-index: 666;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    view {
      width: 100%;
      height: 40%;
      font-size: 30rpx;
      background: #F5F5F5;
    }

    .fex-left {
      border-radius: 60rpx;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      border: 1px solid #ccc;

      image {
        width: 30%;
        height: 60%;
      }
    }

    .fex-right {
      border-radius: 60rpx;
      border: 1px solid #ccc;

      view {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-evenly;

        image {
          width: 30%;
          height: 60%;
        }
      }
    }
  }

  .header {
    width: 100%;
    height: 400rpx;
    display: flex;
    flex-direction: column;

    .Top {
      width: 100%;
      height: 300rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .Top-top {
        width: 100%;
        height: 25%;
        display: flex;
        align-items: center;

        .Top-top-left {
          width: 20%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;

          .text {
            font-size: 12px;
            color: #666;
            margin-top: 5px;
          }

          .uni-px-5 {
            padding-left: 10px;
            padding-right: 10px;
          }

          .uni-pb-5 {
            padding-bottom: 10px;
          }
        }

        .Top-top-right {
          width: 60%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .Top-top-text {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
        }

      }

      .Top-con {
        width: 100%;
        height: 50%;
        display: flex;

        .Top-con-item {
          width: 50%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .on {
            color: red;
          }

          image {
            width: 45%;
            height: 90%;
          }
        }

      }
    }
  }

  .con {
    width: 95%;
    height: 100%;
    margin: 0 auto;

    .con-item {
      width: 100%;
      height: 230rpx;
      margin-top: 20rpx;
      margin-bottom: 30rpx;
      display: flex;
      justify-content: space-around;

      .con-item-left {
        width: 30%;
        height: 100%;
        overflow: hidden;

        .img {
          width: 98%;
          height: 98%;
          display: inline-block;
          margin: 0 auto;
          border-radius: 10rpx;
        }
      }

      .con-item-right {
        width: 65%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .title {
          font-weight: bold;
          font-size: 38rpx;
        }

        .pingmi {
          font-size: 30rpx;
        }

        .jiage {
          font-size: 28rpx;

          .price {
            font-weight: bold;
            color: #FF9900;
          }

          .mi {
            display: inline-block;
            margin-left: 20rpx;
            font-size: 26rpx;
          }
        }

        .type {
          width: 100rpx;
          height: 50rpx;
          background: #ccc;
          font-size: 24rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

    }
  }

  .null {
    width: 100%;
    height: 700rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    font-family: 'Courier New', Courier, monospace;

    image {
      width: 100%;
    }

    text {
      font-size: 38rpx;
    }
  }
}
</style>
